path: root/app/[lng]/evcp/(evcp)/(system)/change-vendor/change-vendor-client.tsx

'use client';

import * as React from 'react';
import { useState, useTransition } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Loader2, Search, User, Building2 } from 'lucide-react';
import { searchUsers, getUserVendorInfo, getVendorList, changeVendor } from '@/lib/change-vendor/service';
import { toast } from 'sonner';

interface User {
  id: number;
  name: string;
  email: string;
  companyId: number | null;
}

interface UserVendorInfo {
  userId: number;
  userName: string;
  userEmail: string;
  currentVendorId: number | null;
  currentVendorName: string | null;
  currentVendorCode: string | null;
}

interface Vendor {
  id: number;
  vendorName: string;
  vendorCode: string | null;
  status: string;
}

export function ChangeVendorClient() {
  const [isPending, startTransition] = useTransition();
  const [isSearchingUsers, setIsSearchingUsers] = React.useState(false);
  const [isSearchingVendors, setIsSearchingVendors] = React.useState(false);
  const [isLoadingVendorInfo, setIsLoadingVendorInfo] = React.useState(false);
  
  const [userSearchQuery, setUserSearchQuery] = useState('');
  const [users, setUsers] = useState<User[]>([]);
  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
  const [userVendorInfo, setUserVendorInfo] = useState<UserVendorInfo | null>(null);
  
  const [vendorSearchQuery, setVendorSearchQuery] = useState('');
  const [vendors, setVendors] = useState<Vendor[]>([]);
  const [selectedVendorId, setSelectedVendorId] = useState<string>('');
  
  const [error, setError] = useState<string | null>(null);

  // 유저 검색
  const handleSearchUsers = async () => {
    if (isSearchingUsers) return;

    setIsSearchingUsers(true);
    setError(null);
    setSelectedUserId(null);
    setUserVendorInfo(null);
    setSelectedVendorId('');

    try {
      const result = await searchUsers(userSearchQuery);
      
      if (result.error) {
        setError(result.error);
        return;
      }

      setUsers(result.data || []);
      
      if (result.data && result.data.length === 0) {
        toast.info('검색 결과가 없습니다.');
      }
    } catch (err) {
      setError('유저 검색 중 오류가 발생했습니다.');
      console.error(err);
    } finally {
      setIsSearchingUsers(false);
    }
  };

  // 유저 검색어 입력 시 엔터키 처리
  const handleUserSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleSearchUsers();
    }
  };

  // 유저 선택 시 해당 유저의 벤더 정보 조회
  const handleUserSelect = async (userId: number) => {
    setSelectedUserId(userId);
    setUserVendorInfo(null);
    setSelectedVendorId('');
    setIsLoadingVendorInfo(true);
    setError(null);

    try {
      const result = await getUserVendorInfo(userId);
      
      if (result.error) {
        setError(result.error);
        return;
      }

      setUserVendorInfo(result.data);
      
      // 벤더 목록도 함께 로드
      await loadVendors();
    } catch (err) {
      setError('유저 정보를 불러오는 중 오류가 발생했습니다.');
      console.error(err);
    } finally {
      setIsLoadingVendorInfo(false);
    }
  };

  // 벤더 목록 로드
  const loadVendors = async () => {
    setIsSearchingVendors(true);
    try {
      const result = await getVendorList(vendorSearchQuery);
      
      if (result.error) {
        setError(result.error);
        return;
      }

      setVendors(result.data || []);
    } catch (err) {
      setError('벤더 목록을 불러오는 중 오류가 발생했습니다.');
      console.error(err);
    } finally {
      setIsSearchingVendors(false);
    }
  };

  // 벤더 검색
  const handleSearchVendors = async () => {
    if (isSearchingVendors) return;

    setIsSearchingVendors(true);
    setError(null);
    setSelectedVendorId('');

    try {
      const result = await getVendorList(vendorSearchQuery);
      
      if (result.error) {
        setError(result.error);
        return;
      }

      setVendors(result.data || []);
      
      if (result.data && result.data.length === 0) {
        toast.info('검색 결과가 없습니다.');
      }
    } catch (err) {
      setError('벤더 검색 중 오류가 발생했습니다.');
      console.error(err);
    } finally {
      setIsSearchingVendors(false);
    }
  };

  // 벤더 검색어 입력 시 엔터키 처리
  const handleVendorSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleSearchVendors();
    }
  };

  // 벤더 변경 처리
  const handleChangeVendor = () => {
    if (!selectedUserId) {
      toast.error('유저를 선택해주세요.');
      return;
    }

    if (!selectedVendorId) {
      toast.error('변경할 벤더를 선택해주세요.');
      return;
    }

    const vendorId = Number(selectedVendorId);
    
    if (userVendorInfo?.currentVendorId === vendorId) {
      toast.error('현재 선택된 벤더와 동일합니다.');
      return;
    }

    startTransition(async () => {
      try {
        const result = await changeVendor(selectedUserId, vendorId);

        if (result.error || !result.success) {
          toast.error(result.error || '벤더 변경에 실패했습니다.');
          return;
        }

        toast.success(`"${result.data?.userName}"님의 벤더가 "${result.data?.vendorName}"로 변경되었습니다.`);

        // 유저 정보 새로고침
        await handleUserSelect(selectedUserId);
      } catch (err) {
        toast.error('벤더 변경 중 오류가 발생했습니다.');
        console.error(err);
      }
    });
  };

  return (
    <div className="space-y-6">
      {/* 1단계: 유저 검색 및 선택 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <User className="h-5 w-5" />
            유저 검색 및 선택
          </CardTitle>
          <CardDescription>
            벤더를 변경할 유저를 검색하고 선택하세요.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* 유저 검색 */}
          <div className="flex gap-2">
            <div className="flex-1">
              <Input
                placeholder="유저명 또는 이메일로 검색..."
                value={userSearchQuery}
                onChange={(e) => setUserSearchQuery(e.target.value)}
                onKeyDown={handleUserSearchKeyDown}
                disabled={isSearchingUsers}
              />
            </div>
            <Button
              type="button"
              variant="outline"
              onClick={handleSearchUsers}
              disabled={isSearchingUsers}
            >
              {isSearchingUsers ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <Search className="h-4 w-4" />
              )}
              <span className="ml-2">검색</span>
            </Button>
          </div>

          {/* 유저 선택 */}
          {users.length > 0 && (
            <div className="grid gap-2">
              <Label>유저 선택</Label>
              <Select
                value={selectedUserId?.toString() || ''}
                onValueChange={(value) => handleUserSelect(Number(value))}
                disabled={isLoadingVendorInfo}
              >
                <SelectTrigger>
                  <SelectValue placeholder="유저를 선택하세요" />
                </SelectTrigger>
                <SelectContent>
                  {users.map((user) => (
                    <SelectItem key={user.id} value={user.id.toString()}>
                      <div className="flex flex-col">
                        <span>{user.name}</span>
                        <span className="text-xs text-muted-foreground">{user.email}</span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          )}

          {isLoadingVendorInfo && (
            <div className="flex items-center justify-center py-4">
              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
            </div>
          )}

          {/* 선택한 유저의 현재 벤더 정보 */}
          {userVendorInfo && (
            <div className="rounded-lg border p-4 bg-muted/50">
              <div className="grid gap-2">
                <div className="flex items-center gap-2">
                  <User className="h-4 w-4 text-muted-foreground" />
                  <Label className="text-sm font-medium">선택한 유저</Label>
                </div>
                <div className="text-sm">
                  <div className="font-semibold">{userVendorInfo.userName}</div>
                  <div className="text-muted-foreground">{userVendorInfo.userEmail}</div>
                </div>
                <div className="mt-2 pt-2 border-t">
                  <div className="flex items-center gap-2 mb-1">
                    <Building2 className="h-4 w-4 text-muted-foreground" />
                    <Label className="text-sm font-medium">현재 벤더</Label>
                  </div>
                  <div className="text-sm font-semibold">
                    {userVendorInfo.currentVendorName || '벤더 정보 없음'}
                    {userVendorInfo.currentVendorCode && (
                      <span className="text-muted-foreground ml-2">
                        ({userVendorInfo.currentVendorCode})
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* 2단계: 벤더 검색 및 선택 (유저 선택 후에만 표시) */}
      {selectedUserId && userVendorInfo && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Building2 className="h-5 w-5" />
              벤더 변경
            </CardTitle>
            <CardDescription>
              변경할 벤더를 검색하고 선택하세요.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {/* 벤더 검색 */}
            <div className="flex gap-2">
              <div className="flex-1">
                <Input
                  placeholder="벤더명 또는 벤더코드로 검색..."
                  value={vendorSearchQuery}
                  onChange={(e) => setVendorSearchQuery(e.target.value)}
                  onKeyDown={handleVendorSearchKeyDown}
                  disabled={isSearchingVendors}
                />
              </div>
              <Button
                type="button"
                variant="outline"
                onClick={handleSearchVendors}
                disabled={isSearchingVendors}
              >
                {isSearchingVendors ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
                  <Search className="h-4 w-4" />
                )}
                <span className="ml-2">검색</span>
              </Button>
            </div>

            {/* 벤더 선택 */}
            {vendors.length > 0 && (
              <div className="grid gap-2">
                <Label htmlFor="vendor-select">변경할 벤더 선택</Label>
                <Select
                  value={selectedVendorId}
                  onValueChange={setSelectedVendorId}
                  disabled={isPending}
                >
                  <SelectTrigger id="vendor-select">
                    <SelectValue placeholder="벤더를 선택하세요" />
                  </SelectTrigger>
                  <SelectContent>
                    {vendors.map((vendor) => (
                      <SelectItem key={vendor.id} value={vendor.id.toString()}>
                        <div className="flex flex-col">
                          <span>{vendor.vendorName}</span>
                          {vendor.vendorCode && (
                            <span className="text-xs text-muted-foreground">
                              {vendor.vendorCode}
                            </span>
                          )}
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}

            {error && (
              <Alert variant="destructive">
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}

            {/* 저장 버튼 */}
            <Button
              onClick={handleChangeVendor}
              disabled={isPending || !selectedVendorId}
              className="w-full"
            >
              {isPending ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  변경 중...
                </>
              ) : (
                <>
                  <Building2 className="mr-2 h-4 w-4" />
                  벤더 변경
                </>
              )}
            </Button>
          </CardContent>
        </Card>
      )}
    </div>
  );
}